<template>
  <div :id="id" style="height:100%;width:100%" />
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";

export default {
  mixins: [resize],
  name: "wordcloudchart",
  props: {
    id: {
      type: String,
      default: "chart"
    },
    jsonList:{
      type:Array
    }
  },
  watch:{
    jsonList(newValue){
      if(newValue){
        //此处要使用箭头函数，this指向才正确
        // this.JsonList = res.data.result
        console.log('newValue:',newValue);
        this.chart = echarts.init(document.getElementById(this.id));
        const option = {
          tooltip: {
            show: false
          },
          series: [
            {
              name: "热点分析",
              type: "wordCloud",
              size: ["9%", "99%"],
              sizeRange: [6, 66], //画布范围，如果设置太大会出现少词（溢出屏幕）
              //shape: 'circle',
              //用来调整字的大小范围
              // Text size range which the value in data will be mapped to.
              // Default to have minimum 12px and maximum 60px size.

                      //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
                      rotationRange: [0, 0], //数据翻转范围 0 0为横向

                      textPadding: 0,
                      autoSize: {
                        enable: false,
                        minSize: 10
                      },
                      textStyle: {
                        normal: {
                          // color: "#1f77b4"
                          color: function() {
                            return (
                                    "rgba(" +
                                    Math.floor(Math.random() * (17 - 246 + 1) + 246) +
                                    ", " +
                                    Math.floor(Math.random() * (64 - 245 + 1) + 245) +
                                    ", " +
                                    Math.floor(Math.random() * (116 - 253 + 1) + 253) +
                                    ",1)"
                            );
                          }
                        },
                        emphasis: {
                          shadowBlur: 10,
                          shadowColor: "#333"
                        }
                      },

              data: newValue,
              left: "0%",
              // top: "center",
              right: "0%",
              // bottom: null,
              width: "90%",
              height: "90%"
            }
          ]
        };
        this.chart.setOption(option);
      }
    }
  },
  data() {
    return {
      chart: null,
    };
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  }
};
</script>
<style lang='less' scoped>
.chartsClass {
  padding-left: 1.2rem;
}
</style>